<script setup lang="ts">
import { VueDraggable } from "vue-draggable-plus";
import CommonConfig from "./CommonConfig.vue";
import type { FormDesignerComponents } from "../FormComponentMixin";
const config = defineModel<FormDesignerComponents>("config");

function addOption() {
  config.value.props.options.push({
    label: `选项${config.value.props.options.length + 1}`,
    value: `${config.value.props.options.length + 1}`
  });
}
</script>

<template>
  <CommonConfig v-model:config="config" />
  <el-form-item label="提示文字">
    <el-input v-model="config.props.placeholder" placeholder="输入提示" />
  </el-form-item>
  <el-form-item label="选项设置">
    <el-button type="primary" icon="circle-plus" @click="addOption">添加选项</el-button>
  </el-form-item>
  <vue-draggable
    class="w-fd-options"
    handle=".w-move"
    :animation="150"
    v-model="config.props.options"
  >
    <div
      style="display: flex; justify-content: space-between"
      v-for="(option, i) in config.props.options"
      :key="i"
    >
      <el-button icon="Rank" class="w-move" />
      <el-input v-model="config.props.options[i].value" />
      <el-input v-model="config.props.options[i].label" />
      <el-button icon="Delete" @click="config.props.options.splice(i, 1)" />
    </div>
  </vue-draggable>
  <el-form-item label="选项展开">
    <el-switch v-model="config.props.expanding" />
  </el-form-item>
  <el-form-item label="隐藏名称">
    <el-switch v-model="config.props.hideLabel" />
  </el-form-item>
  <el-form-item label="是否必填">
    <el-switch v-model="config.props.required" />
  </el-form-item>
</template>

<style lang="scss" scoped>
.w-fd-options {
  margin-bottom: 10px;
}
:deep(.w-fd-options) {
  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;
  }
}

.w-move {
  cursor: move;
}
</style>
